<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>AI查询 - adhoc</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <script type="text/javascript" src="js/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="js/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/plugin/tablesorter/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/apiTest.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/defaults-zh_CN.min.js"></script>
    <script type="text/javascript" src="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.js"></script>
    <script type="text/javascript" src="js/plugin/fullscreen.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/sybn_bootstrap.js"></script>
    <script type="text/javascript" src="js/sybn_common.js"></script>
    <script type="text/javascript" src="js/sybn_desc_table.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
<!--    <script type="text/javascript" src="js/login_simple.js"></script>-->
    <script type="text/javascript" src="js/plugin/sql/codemirror.js"></script>
    <script type="text/javascript" src="js/plugin/sql/matchbrackets.js"></script>
    <script type="text/javascript" src="js/plugin/sql/ai.js"></script>
    <script type="text/javascript" src="js/plugin/sql/show-hint.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint3.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint-sybn.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/pako.min.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/base64_gzip.js"></script>
    <script type="text/javascript" src="js/plugin/clipboard/clipboard.min.js"></script>
    <link rel="stylesheet" href="css/fontawesome-4.2.0_ie7/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.css" />
    <link rel="stylesheet" href="js/plugin/tablesorter/theme.default.min.css" />
    <link rel="stylesheet" href="css/plugin/sql/codemirror.css" />
    <link rel="stylesheet" href="css/plugin/sql/show-hint.css" />
    <link rel="stylesheet" href="css/bootstrap_sybn_custom.css" />
    <link rel="stylesheet" href="css/api_test.css" />
    <style>
        .form-control.CodeMirror{height:230px; width:100%;}
        .panel_type_xs .form-control.CodeMirror{height: 95px;width:100%;}
        .sql_input_big .form-control.CodeMirror{height: 500px}
        .sql_input_big .iframe_preview {max-height: 400px;}
        .sql_input_big2 .form-control.CodeMirror{height: 800px}
        .sql_input_big2 .iframe_preview {max-height: 500px;}
        .btn-group-xs .btn.common_use_select {padding: 0px 5px; font-size: 10px; line-height: 1.0;}
        .common_use {margin-right: 10px;}
        .loading-indicator {position: absolute;top: 0;left: 0;padding: 10%;width: 100%;height: 100%;background: rgba(225, 225, 255, 0.8);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 1000;}
        .spinner {border: 4px solid rgba(0, 0, 0, 0.1);width: 36px;height: 36px;border-radius: 50%;border-left-color: #09f;animation: spin 1s linear infinite;}
        @keyframes spin {to {transform: rotate(360deg);}}
        iframe {width: 100%;height: 100%;border: none;position: relative;z-index: 1;}
        .ai_result hr {margin-top: 0px;margin-bottom: 0px;border: 0;border-top: 1px solid #eee}
        .ai_result b {color:#337ab7}
        .ai_result .score {color:#F33}
        .action_group select.modelName {width: 140px;}
        #p_select_gbi {min-width: 750px;}
        .common_use_select{text-align: left;}
    </style>
</head>
<body>

<ul class="nav nav-tabs">
    <li><strong class="title">即席分析(adhoc)</strong></li>
    <li class="active"><a href="#p_select_gbi" data-toggle="tab" aria-expanded="false">人工智能查询</a></li>
    <li class=""><a href="#p_info" data-toggle="tab" aria-expanded="false">关于</a></li>
    <li class="floatRight padding3">
        <button type="button" class="btn btn-warning btn-xs login_out">注销<span class="login_username"></span></button>
        <!-- <button type="button" class="btn btn-danger btn-xs" onclick="$('#cacheRefresh').click()">刷新缓存</button>-->
    </li>
</ul>
<div class="tab-content">

    <div id="p_select_gbi" class="panel panel-primary tab-pane active sybn-api-demo">

         <div class="panel-heading text-primary btn-group-xs">
             <span class="p_title"> bi - AI智能问答, 当前支持查询生产环境的部分报表(T05,M01)相关问题, 基于百炼工作流应用 </span>
         </div>

        <div class="panel-body sybn-api-demo collapse in">

            <div class="input-group input-group-xs sql_textarea_parent">
                 <span class="common_use btn-group-vertical input-group-addon btn-group-xs padding0">可选择常用问题:</span>
                 <select class="btn btn-default common_use_select form-control" title="常用问题" onchange="setGbiFun(this)">
                     <option value="租户756142自营渠道在2025年3月1日的票房和售票数">租户756142自营渠道在2025年3月1日的票房和售票数</option>
                     <option value="请帮我统计自营渠道2025年3月1日的票房总额和总售票量？">请帮我统计自营渠道2025年3月1日的票房总额和总售票量？</option>
                     <option value="在2025年3月1日通过自营渠道卖了多少张票？对应的票房收入是多少？">在2025年3月1日通过自营渠道卖了多少张票？对应的票房收入是多少？</option>
                     <option value="请统计该租户756142自营渠道在2025年3月1日当天的票房和影票数量。">请统计该租户756142自营渠道在2025年3月1日当天的票房和影票数量。</option>
                     <option value="我需要租户756142自营渠道2025年3月1日的两项数据：票房收入和出票张数。">我需要租户756142自营渠道2025年3月1日的两项数据：票房收入和出票张数。</option>
                     <option value="调取2025年3月1日租户756142自营渠道的票房数据及出票张数。">调取2025年3月1日租户756142自营渠道的票房数据及出票张数。</option>
                     <option value="自营渠道在2025年3月1日的票房表现和出票量？">自营渠道在2025年3月1日的票房表现和出票量？</option>
                     <option value="自营渠道在2025年3月1日的单日票房和影票数量分别是多少。">自营渠道在2025年3月1日的单日票房和影票数量分别是多少。</option>
                     <option value="2025年3月1日，租户ID756142通过自有渠道实现的票房收入及影票张数是多少？">2025年3月1日，租户ID756142通过自有渠道实现的票房收入及影票张数是多少？</option>
                     <option value="我需要两项数据：2025年3月1日，①自营渠道的票房金额，②当天该渠道售出的总票数。">我需要两项数据：2025年3月1日，①自营渠道的票房金额，②当天该渠道售出的总票数。</option>
                 </select>
            </div>
            <div class="input-group input-group-xs sql_textarea_parent">
                <textarea id="userQuery" name="userQuery" rows="5" class="form-control sql_textarea" style="height:100px;">租户230319今天的按省份的票房</textarea>

                <span class="btn-group-vertical input-group-addon btn-group-xs padding0 action_group">
                    <select class="btn btn-default modelName" name="cacheAble">
                        <option value="false" selected="selected">禁止缓存ai结果</option>
                        <option value="true">允许缓存ai结果</option>
                    </select>
                    <select class="btn btn-default modelName" name="apiVersion">
                        <option value="bailian_flow_cx_0411" selected="selected">百炼工作流_0411</option>
                        <option value="bailian_flow_cx_0417">百炼工作流_0417</option>
                        <option value="bailian_flow_lpf_0411">百炼工作流_lpf_0411</option>
<!--                        <option value="java_0415">java_0415</option>-->
                    </select>
                    <select class="btn btn-default modelName" name="modelName">
                        <option value="qwq-plus" selected="selected">qwq-plus</option>
                        <option value="qwen-coder-plus">qwen-coder-plus</option>
                        <option value="deepseek-r1">deepseek-r1</option>
                    </select>
                    <span class="btn-group-vertical input-group-addon btn-group-xs padding0">
                        <span class="btn btn-default gbiApi submit">提问</span>
                    </span>
                </span>
            </div>
            <div class="input-group input-group-xs iframe-container ai_result" style="width:100%; height:500px;">
                <div class="loading-indicator" id="loadingIndicator">
                    <div class="spinner"></div>
                    <p id="view_param">Loading...</p>
                </div>
                <span id="knowledge" rows="15"></span>
                <span><b>结果:</b></span>
                <textarea id="resultMsg" rows="20"></textarea>
                <span id="prompt"></span>
                <div id="outputTable"></div>
            </div>
        </div>
    </div>

    <div id="p_info" class="panel panel-primary tab-pane">
        <div class="panel-heading text-primary">
            <span class="p_title">关于 About</span>
        </div>
        <div class="panel-body sybn-api-demo collapse in">

            <div class="panel panel-success w100">
                <div class="panel-heading text-primary">
                    <span class="p_title">服务器状态</span>
                </div>
                <div class="panel-body sybn-api-demo collapse in">
                    <iframe title="info" class="json_iframe" src="info_vue.html?r=60"></iframe>
                </div>
            </div>

            <div class="panel panel-success w100">
                <div class="panel-heading text-primary">
                    <span class="p_title">重要更新: 2024-04-02</span>
                </div>
                <div class="panel-body collapse in change_log">
                    <p>
                        <strong>2025-01-02</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/gzip/gzip.html" target="_blank">gzip工具</a></span>
                    </p>
                    <p>
                        <strong>2024-04-02</strong><br/>
                        <span class="change_log_line">
                            <span>sql 翻译工具: </span>
                            <a href="js/plugin/mergely/examples/replace_clickhouse.html" target="_blank">to clickhouse </a> |
                            <a href="js/plugin/mergely/examples/replace_holo.html" target="_blank">to holo </a> |
                            <a href="js/plugin/mergely/examples/replace_flink.html" target="_blank">to flink </a>
                        </span>
                        <br/>
                        <span class="change_log_line">
                            <span>对比工具: </span>
                            <a href="js/plugin/mergely/examples/compare_tables.html" target="_blank">列表相似度对比 </a>
                        </span>
                    </p>
                    <p>
                        <strong>2023-05-29</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_java.html" target="_blank">java调用关系图</a></span>
                    </p>
                    <p>
                        <strong>2022-12-23</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_join.html" target="_blank">表join关系图</a></span>
                    </p>
                    <p>
                        <strong>2022-04-07</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/mergely/examples/simple.html" target="_blank">文本对比工具</a></span>
                    </p>
                    <p>
                        <strong>2020-05-26</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_template2.html?table=dim_oristar_cmc_base_sale_channel" target="_blank">表关系图</a></span><br/>
                        <!--                        <span  class="change_log_line"><a href="js/plugin/viz/viz_template2.html?table=CINEMA.dw_pos_movie_ticket_order_collect&action=all" target="_blank">表关系图</a></span><br/>-->
                    </p>
                    <p>
                        <strong>2020-02-06</strong><br/>
                        <span class="change_log_line"><a href="sql_translate.html" target="_blank">sql转换</a></span>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <div style="display: none;">
        <table summary="" id="defaultsTemplate" class="tableTemplate tablesorter tablesorter-default" style="display: none;">
            <thead class="thTemplate">
                <tr class="info textCenter"><th scope="col" style="display: none;"> </th></tr>
            </thead>
            <tbody class="trTemplate">
                <tr class="tinfo phrase_tr" data-id="#{id}"> </tr>
            </tbody>
        </table>
    </div>

    <!-- login Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close login_close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel">登录账户</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">账户</span>
                        <input type="text" class="form-control" placeholder="登录的帐户名" name="username"/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">密码</span>
                        <input type="password" class="form-control" placeholder="密码" name="password"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="prompt"></span>
                    <button type="button" class="btn btn-default login_close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary login_submit">登录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="contextmenu contextmenu_div" id="sub-menu">
        <ul class="list-group">
            <li class="list-group-item">
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="=">等于此值</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="!=">不等于此值</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op=">">大于</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="<">小于</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="in">in</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="like">like</a>
            </li>
            <li class="list-group-item"><a id="btn_copy_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_field">复制字段</a> <span>:</span> <span id="copy_field">${field}</span></li>
            <li class="list-group-item"><a id="btn_copy_type"  class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_type">复制类型</a> <span>:</span> <span id="copy_type">${type}</span></li>
            <li class="list-group-item"><a id="btn_copy_value" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_value">复制数值</a> <span>:</span> <textarea id="copy_value" class="copy_textarea">${value}</textarea></li>
        </ul>
    </div>
    <div class="contextmenu contextmenu_div" id="title-menu">
        <ul class="list-group">
            <li class="list-group-item"><a id="title_btn_copy_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_field">复制字段</a>: <span id="title_copy_field">${field}</span></li>
            <li class="list-group-item"><a id="title_btn_copy_value" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_value">复制总和</a>: <span id="title_copy_value" class="sybn_ellipsis" style="max-width:100px;">${value}</span></li>
            <li class="list-group-item"><a id="title_btn_copy_col" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_col">复制整列</a>: <textarea id="title_copy_col" class="copy_textarea">${calVal}</textarea></li>
            <li class="list-group-item"><a id="title_btn_copy_all_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_all_field">复制所有字段名</a>: <textarea id="title_copy_all_field" class="copy_textarea">${title_copy_all_field}</textarea></li>
        </ul>
    </div>
</div>
</body>
<script>
// SQL语句高亮
$(document).ready(function() {

    // 初始化sql编辑器
    // initAiEditor({});
    // 初始化sql编辑器的代码提示
    // initAiEditorByApi("api/bean/table_info.json?is_subset=true&_res_type=mini");

    // 注册自定义模式
    var chineseWords = "C端 交易时间 全渠道 出票量 占比 微信小程序 平均票价 放映时间 服务费 渠道 票房金额 自营渠道 自营小程序 退票数 三方渠道 POS渠道 TSP渠道 上线90天 上线日期 今年 卖品金额 收银员 C端订单 C端渠道 下单时间 全部渠道 不限渠道 出票数 出票数量 出票的数量 售票数 售票量 售票数量 售票的数量 观影人次 观影的人次 观影人数 观影的人数 率 小程序 小程序端 票均价 出票均价 影片放映时间 影票服务费 所有服务费 总服务费 渠道名称 票房 出票金额 出票的金额 售票金额 售票的金额 票房的金额 自营 自营渠道小程序 退票量 退票数量 退票的数量 三方 第三方渠道 pos pos柜台 tsp 上线时间 当年 本年 卖品额 卖品销售金额 票类 交易类型 平台服务费 交易日期 票数 影厅名称 C端终端名称 放映日期 其他支付 增值服务费 审核时间 交易渠道 票券编号 语种 C端终端编号 卡类型 会员等級 匹配优惠 取票状态 三方优惠金额 移动POS支付-招商银行 支票 转账 第三方合作-影票 会员卡 发行版本 三方影院补贴 现金 团体赊销 银行补贴 微信 影院补贴 网络代售 积分 工行聚合支付 票券 银行卡 票价 支付宝 银联扫码 购票渠道类型 聚合支付 团购网 影厅类型 团体客户补贴 网络代售费 饿了么 是否C端订单 影院编码 取票时间 影厅编码 销售类型 影片名称 会员信息 影院名称 购票渠道 交易渠道类型 会员卡号 最低票价 交易状态 匹配营销活动 交易数量 折后单价 取货状态 取货时间 销售金额 应销金额 类别码 类别名称 商品名称 规格 商品类型 单位 混合支付名称 月份 第三方合作-卖品 优惠额 店内码 年 月 票券申请单号 城市 影院UID 票券销售单价 票券补贴 影片编码 手机号码 促销票价 省份 租户ID 交易渠道名称 创建时间 订单终端 商品店内码 商品sku"
       .split(" ");

    CodeMirror.defineMode("text/gbi", function(config, parserConfig) {
        var mode = CodeMirror.getMode(config, "sql"); // 基于 SQL 模式扩展
        return {
            token: function(stream, state) {
                if (stream.match(/^[\u4e00-\u9fa5_a-zA-Z0-9]+/)) { // 匹配中文、英文和数字
                    var word = stream.current();
                    if (chineseWords.indexOf(word) > -1) {
                        return "keyword"; // 返回 keyword 样式类名
                    }
                    return null; // 默认样式
                }
                while (stream.next() && !stream.match(/^[\u4e00-\u9fa5_a-zA-Z0-9]/, false)) {}
                return null;
            },
            startState: mode.startState,
            copyState: mode.copyState,
            indent: mode.indent,
            lineComment: "--",
            blockCommentStart: "/*",
            blockCommentEnd: "*/"
        };
    });

	$('.sql_textarea').each(function(index) {
        $this = $(this);
        if (!$this.data("editor")) {
            // 初始化编辑器
            window["sql_editor_"+index] = CodeMirror.fromTextArea(this, {
                mode: 'text/gbi', // sybn 自定义sql高亮
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets : true,
                lineWrapping: true, //是否自动换行
                autofocus: true,
                autoRefresh: true,
                viewportMargin: 100,
                extraKeys: {"Alt": "autocomplete"} // 开启语法提示
                // hintOptions: {tables:tables}
            });
            $this.data("editor", "sql_editor_"+index);
            $this.addClass("sql_textarea_refresh");
        } else {
            // 初始化代码提示
            var editor_id = $this.data("editor");
            var codeMirror = window[editor_id];
            // codeMirror.options.hintOptions = {tables:tables};
            codeMirror.refresh();
            $this.addClass("sql_textarea_refresh");
            console.log(editor_id + "载入代码提示");
        }
	});

    var query_api_base = getQueryString("api_base") || "";
    var query_api_version = getQueryString("api_version") || "";
    var query_api_mode = getQueryString("api_mode") || "";
    var query_api_query = getQueryString("api_query") || "";
    var query_api_cache = getQueryString("api_cache") || "";

    if (query_api_version) {
        $('[name=apiVersion]').val(query_api_version);
    }
    if (query_api_mode) {
        $('[name=modelName]').val(query_api_mode);
    }
    if (query_api_query) {
        $('[name=userQuery]').val(unzip(query_api_query));
    }
    if (query_api_cache) {
        $('[name=cacheAble]').val(query_api_cache);
    }

    $('body').on('click', '.gbiApi', function(e) {
        // 主接口地址
        var api = query_api_base + ($(this).data("api") || "api/chatbot/chat.json");
        var userQuery = $('[name=userQuery]').val();
        var modelName = $('[name=modelName]').val();
        var apiVersion = $('[name=apiVersion]').val();
        var cacheAble = $('[name=cacheAble]').val();

        var url2 = window.location.href.toString()
        url2 = changeURLPar(url2, "api_mode", modelName);
        url2 = changeURLPar(url2, "api_version", apiVersion);
        url2 = changeURLPar(url2, "api_query", zip(userQuery));
        url2 = changeURLPar(url2, "api_cache", cacheAble);
        window.history.pushState({},0,url2);

        loadingIndicator.style.display = 'block';
        document.getElementById('view_param').innerHTML = userQuery + "<br/>思考中...";

        var button = $(this);
        button.prop('disabled', true);
        var startTime = new Date().getTime();

        var aj = $.ajax({
          url : api,
          type : 'post',
          data : {query : userQuery, modelName: modelName, apiVersion: apiVersion, cacheAble: cacheAble},
          cache : false,
          dataType : 'json',
          async : true,
          success : function(data) {
            button.prop('disabled', false);
            if (data && data.resultMsg) {
                document.getElementById('resultMsg').value = data.resultMsg;
                document.getElementById('knowledge').innerHTML = data.knowledge;
                var inputTokens = data.inputTokens;
                var outputTokens = data.outputTokens;
                var time = dateFormatting(new Date(), "yyyy-MM-dd hh:mm:ss")
                var tkFee = " <b>inputTokens: </b>" + inputTokens + " <b>outputTokens: </b>" + outputTokens + " <b title='"+(inputTokens/1000)+"*0.0035元+"+(outputTokens/1000)+"*0.007元"+"'>费用: </b>"+ (inputTokens/1000*0.0035+outputTokens/1000*0.007).toFixed(4) +"元";
                document.getElementById('prompt').innerHTML = time + " <b>sessionId:</b>" + data.sessionId + " <b>requestId:</b>" + data.requestId + tkFee;

            } else {
                document.getElementById('resultMsg').value = "";
                document.getElementById('knowledge').innerHTML = data.knowledge;
            }


            // 显示表格
            if (data && data.resData) {
                var resData = data.resData;
                var $p = $("#outputTable");
                resetPreviewTabs($p);
                var view_id = setPreviewTabs($p);
                //格式化json
                var $jsonView = $p.find('.json_view');
                var rowsLength = resData.length;
                if (resData && resData.length <= 500) {
                    // 如果返回值在500行以内，将json格式化显示
                    $jsonView.JSONView(data);
                } else if (resData && resData.length >= 1000) {
                    // 如果返回值在1000行以上，不格式化返回值, 并仅保留最多1000行
                    resData.splice(1000, resData.length-2);
                    var jsonData = JSON.stringify(resData);
                    $jsonView.text(jsonData);
                    $jsonView.prepend("<div style='color: #900b09;border: 1px dotted #900b09;background: #FEB;'>返回值内容过大["+rowsLength+"行]，为了防止浏览器崩溃，已禁用json格式化, 并仅保留最多1000行。</div>");
                } else {
                    // 如果返回值在500行以上，不格式化返回值，因为格式化太大json会卡死浏览器
                    var jsonData = JSON.stringify(resData);
                    $jsonView.text(jsonData);
                    $jsonView.prepend("<div style='color: #900b09;border: 1px dotted #900b09;background: #FEB;'>返回值内容过大["+rowsLength+"行]，为了防止浏览器崩溃，已禁用json格式化。</div>");
                }

                // 显示表格
                // class=fixed
                $jsonView.after("<div id='view_table_"+view_id+"' class='iframe_preview tab-pane'><table class='table table-condensed tableTarget table-striped table-bordered table-hover margin0 tablesorter tablesorter-default'><thead><tr class='info'><th>-</th></tr></thead><tbody class='trTarget max-height200'><tr><td class='prompt'>暂无数据</td></tr></tbody></table></div>");
                var $iframe_preview = $jsonView.parent().find(".iframe_preview");

                var endTime = new Date().getTime();
                showDatasByDataGbi(resData, $iframe_preview, endTime-startTime, userQuery);
            } else {
                var $p = $("#outputTable");
                resetPreviewTabs($p);
            }
            if (data.resError) {
                 document.getElementById('prompt').innerHTML += "<br/><span class='red'>"+data.resError+"</span>"
            }
            loadingIndicator.style.display = 'none';
          },
          error : function(data) {
            button.prop('disabled', false);
            document.getElementById('resultMsg').value = `请求失败`;
            loadingIndicator.style.display = 'none';
          }
        });
    });
    $(".view_param").empty().append($(".view_param_1").clone().children());

    const loadingIndicator = document.getElementById('loadingIndicator');
    loadingIndicator.style.display = 'none';

    var panel_type = getQueryString("panel_type");
    if (panel_type == 'xs') {
        $("body").addClass("panel_type_xs")
    }
});

// 设置sql
var setGbiFun = function(t) {
        var setGbi;
        if (typeof t != 'string' && t.value != undefined) {
             setGbi = t.value;
        }
        if (!setGbi) {
            return;
        }
        var s = $('[name=userQuery]').val(setGbi);
}

function initAiEditor2(tables) {
	$('.sql_textarea').each(function(index) {
        $this = $(this);
        if (!$this.data("editor")) {
            // 初始化编辑器
            window["sql_editor_"+index] = CodeMirror.fromTextArea(this, {
                mode: 'text/gbi', // sybn 自定义sql高亮
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets : true,
                lineWrapping: true, //是否自动换行
                autofocus: true,
                autoRefresh: true,
                viewportMargin: 100,
                extraKeys: {"Alt": "autocomplete"}, // 开启语法提示
                hintOptions: {tables:tables}
            });
            $this.data("editor", "sql_editor_"+index);
            $this.addClass("sql_textarea_refresh");
        } else {
            // 初始化代码提示
            var editor_id = $this.data("editor");
            var codeMirror = window[editor_id];
            codeMirror.options.hintOptions = {tables:tables};
            codeMirror.refresh();
            $this.addClass("sql_textarea_refresh");
            console.log(editor_id + "载入代码提示");
        }
	});
}

function initAiEditorByApi(url) {
    $(".show_table_prompt").text("[正在载入表结构...]");
    $(".show_table_prompt").closest(".panel").addClass("panel-warning").removeClass("panel-success");
    // 获取表结构
    $.ajax({
        type : "GET",
        url : url,
        dataType:"json",
        cache:true,
//        async:false,
        data : {dbsource : getQueryString("dbsource", "")},
        success : function(data) {

            $(".show_table_prompt").text("[就绪]");
            $(".show_table_prompt").closest(".panel").removeClass("panel-warning").addClass("panel-success");

            // 将表结构转换为CodeMirror的格式
            var tables = getHintTableInfo(data);
            // 初始化sql编辑器
            initAiEditor(tables);
        }
    });
}

var showDatasByDataGbi = function(resData, $div, currentSecMills, filename) {
    $view_div = $div.closest('.view_div');
    $view_div.find('.tab_rows').text('');
    if (resData && resData.length > 0) {
        loadDataToTable(resData, $div, "#defaultsTemplate");
        $div.find(".tablesorter").tablesorter();
        $view_div.find('.tab_view_table').click();
        var text = "返回["+resData.length+"]条结果 ";
        if (currentSecMills) {
            var currentSec = currentSecMills / 1000;
            text += (currentSec > 100 ? currentSec.toFixed(0) + "秒 " : currentSec.toFixed(2) + "秒 ");
        }

        $view_div.find('.tab_rows').text(text);
        if (resData.length <= 1000) {
            // 导出数据  为 csv 文件
            var csvDownload = $("<a href='###' title='直接导出以下表格的数据到csv文件' >导出表格</a>")
            csvDownload.on("click", function(){downloadJson2Csv(resData, filename)});
            var csvDownloadLi = $("<li class='tab_clear' style='float:right'></li>")
            csvDownloadLi.append(csvDownload);
            $view_div.find('.tab_rows').closest('li').before(csvDownloadLi);

            // 复制到粘贴板
            var tsvDownload = $("<a href='###' title='复制以下表格的数据到粘贴板' >复制到粘贴板</a>")
            tsvDownload.on("click", function(){downloadJson2Tsv(resData)});
            var tsvDownloadLi = $("<li class='tab_clear' style='float:right'></li>")
            tsvDownloadLi.append(tsvDownload);
            $view_div.find('.tab_rows').closest('li').before(tsvDownloadLi);
        }

        var tableFixed = $("<a href='###' title='对齐列宽' >对齐列宽</a>")
        tableFixed.on("click", function(){
            $table = $view_div.find('table');
            if ($table.hasClass("tableFixed")) {
                $table.removeClass("tableFixed");
                $(this).removeClass("active");
            } else {
                $table.addClass("tableFixed");
                $(this).addClass("active");
            }
        });
        var tableFixedLi = $("<li class='tab_tableFixed' style='float:right'></li>")
        tableFixedLi.append(tableFixed);

        if (resData.length > 1000) {
            $dev.prepend("<div style='color: #900b09;border: 1px dotted #900b09;background: #FEB;'>返回值内容过大["+rowsLength+"行]，为了防止浏览器崩溃，只显示前1000条数据，如需导出大量数据，建议直接导出csv。</div>");
        }
        $view_div.find('.tab_rows').closest('li').before(tableFixedLi);

    } else {
        $div.find('.prompt').text('没有查询到数据!');
    }
}
</script>
</html>
